<template>
  <h1>个人简历练习</h1>
  <table border="1">
    <tr>照片:
      <td><img :src="person.imgUrl" alt=""></td>
    </tr>
    <tr>姓名:
    <td>{{person.name}}</td>
    </tr>
    <tr>年龄:
      <td>{{person.age}}</td>
    </tr>
    <tr>好友:
      <td>{{person.friends.join('、')}}</td>
    </tr>
  </table>
  <button @click="loadData">点击加载数据</button>
</template>

<script setup>
import {ref} from "vue";

const person = ref({
  name:'',
  age:'',
  imgUrl:'',
  friends:[]
});
const loadData = () => {
  person.value = {
    name:'fcq',
    age:18,
    imgUrl:'fcq.jpg',
    friends:['张三','李四','王五']
  }
}
</script>

<style scoped>

</style>
